<include file="Member:leftmenu" />
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/tree.css" />

<style>
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: auto;
    }

    a {
        color: #000
    }

    a,
    a:link,
    a:hover {
        text-decoration: none
    }
</style>
<div id="app" class="content-right fl">
    <div class="tree well">
        <ul>
            <li class="parent_li">
                <span title="Collapse this branch"><i class="icon-minus-sign"></i>中国</span>
                <ul>
                    <li class="parent_li" v-for="(province,provinceIndex) in provinceList">
                        <span @click="chooseProvince(provinceIndex)" ><i class="icon-plus-sign"></i>{{province.area_name}}</span>
                        <a @click.self="changeMoney(province.area_id,[provinceIndex,-1])" class="label label-important">{{province.money}}</a>
                        <a v-if="province.is_sale==0" class="label label-default">未签约</a>
                        <a v-if="province.is_sale==1" class="label label-success">已签约</a>
                        <ul>
                            <li class="parent_li" v-for="(item,index) in province.children">
                                <span><i class="icon-leaf"></i>{{item.area_name}}</span>
                                <a @click.self="changeMoney(item.area_id,[provinceIndex,index])" class="label label-important">{{item.money}}</a>
                                <a v-if="item.is_sale==0" class="label label-default">未签约</a>
                                <a v-if="item.is_sale==1" class="label label-success">已签约</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script src="/Static/mobile/vant/vue.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script type="text/javascript">
    $(function () {
        $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
        $('body').on('click','.tree li.parent_li > span', function (e) {
            var children = $(this).parent('li.parent_li').find(' > ul > li');
            if (children.is(":visible")) {
                children.hide('fast');
                $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
            } else {
                children.show('fast');
                $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
            }
            e.stopPropagation();
        });
    });
    var app = new Vue({
        el: '#app',
        data:{
            provinceList: []
        },
        created: function () {
            this.getProvinceList();
        },
        methods: {
            getProvinceList: function () {
                var self = this;
                $.get('/admin/member/getProvinceList').then(function(res){
                    for(var i=0;i<res.data.length;i++) {
                        self.provinceList.push(res.data[i]);
                    }
                })
            },
            chooseProvince: function (index) {
                var self = this;
                var item = this.provinceList[index];
                if(item.children.length>0) {
                    return false;
                }
                $.get('/admin/member/getProvinceChildren?area_id='+item.area_id).then(function(res){
                    self.provinceList[index].children = [];
                    for(var i=0;i<res.data.length;i++) {
                        self.provinceList[index].children.push(res.data[i]);
                    }
                })
            },
            changeMoney: function (area_id,level) {
                var self = this;
                layer.prompt({title: '请输入该地区代理费用', formType: 2}, function(money, index){
                    var data = {
                        area_id: area_id,
                        money: money
                    };
                    $.ajax({
                        url: '/admin/member/area',
                        data: data,
                        type: 'POST'
                    }).then(function(res){
                        if(level[1]==-1) {
                            self.provinceList[level[0]].money = money;
                        }else{
                            self.provinceList[level[0]].children[level[1]].money = money;
                        }
                    })
                    layer.close(index);
                });
            }
        }
    })
</script>